<template>
<div>
    <h1 class="mb-4">App根组件</h1>
    <button type="button" class="btn btn-primary" @click="comName='MyHome'">首页</button>
    <button type="button" class="btn btn-info ml-2" @click="comName='MyMovie'">电影</button>
    <hr>
    <!-- 动态使用组件 -->
    <!-- 默认情况下，切换动态组件时无法保持组件的状态。此时可以使用vue内置的<keep-alive>组件保持动态组件的状态 -->
    <keep-alive>
        <!-- component是组件的渲染符号，通过is属性动态指定要渲染的组件名称 -->
        <component :is="comName"></component>
    </keep-alive>
</div>
</template>

<script>
// 导入组件
import MyHome from './Home.vue'
import MyMovie from './Movie.vue'
export default{
    name:'MyApp',
    data(){
        return{
            comName:'MyHome',
        }
    },
    // 注册组件
    components:{
        MyHome,
        MyMovie,
    },
}
</script>

<style lang="less" scoped></style>